<template>
	<view class="sharePoster" style="cursor: pointer;">
		<uv-toast ref="toast"></uv-toast>
		<!-- this.$emit('submit', e._id);-->
		<el-popover @show="uvQrcode=true;$emit('shareShow',true)" @hide="$emit('shareShow',false)" placement="top-start"
			trigger="click" v-model="visible">
			<view :style="userInput?'opacity: 1;height: 0px;z-index:-1;margin-top: -600px;':''">
				<view style="display: flex;justify-content: space-between;">
					<el-button style="width: 80%;margin: 5px 3px; 4px" @click="copy(shareLinks)">复制链接</el-button>
					<el-button @click="visible = false" size="medium" style="width: 20%;margin: 5px 0px;padding: 0px;"
						type="danger">
						<i style="font-size: 30px;" class="el-icon-close" />
					</el-button>
				</view>
				<el-button style="width: 100%;margin: 5px 0px;" @click="outerVisible = true">海报有奖分享</el-button>
				<uv-input style="margin: 5px 0px;" placeholder="分享给用户" border="surround"
					@focus="userInput=true"></uv-input>
				<uv-qrcode size="215px" v-if="uvQrcode" :h5SaveIsDownload="true" :value="shareLinks" ref="qrcode"
					:options="optionQr">
				</uv-qrcode>
			</view>
			<view :style="userInput?'z-index:1;':'opacity: 0;height: 0px;'">
				<view @click="userInput = false" style="display: flex;justify-content: flex-start;">
					<el-button size="medium" style="width: 40px;margin: 5px 0px;padding: 5px;" type="danger">
						<i style="font-size: 30rpx;" class="el-icon-close" />
					</el-button>
				</view>
				<el-select v-model="inputs" multiple filterable remote reserve-keyword placeholder="请输入关键词"
					:remote-method="remoteMethod" :loading="loading">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</view>
			<uv-text :prefixIcon="prefixIcon" :suffixIcon="suffixIcon" :iconSize="iconSize" :iconStyle="iconStyle"
				slot="reference" :customStyle="titleStyle" :text="title"></uv-text>
		</el-popover>
		<el-dialog :top="isPc?'15vh':'1vh'" :appendToBody="true" width="751rpx" title="海报有奖分享"
			:visible.sync="outerVisible" style="z-index: inherit;">
			<view v-if="value" style="margin-bottom: 10px;">
				<l-painter ref="painter"
					css="width: 675rpx; padding-bottom: 2rpx;border-radius: 16rpx; background: linear-gradient(,#EFEFEF 0%, #EFEFEF 100%);overflow: hidden;">
					<l-painter-view
						css="margin-left: 1rpx; margin-top: 2rpx; padding: 25rpx 25rpx 10rpx 25rpx; box-sizing: border-box; background: #fff; border-radius: 16rpx; width: 670rpx;">
						<l-painter-image :src="uv_image(value)"
							css="position: relative;object-fit: contain; width: 625rpx; border-radius: 12rpx;" />
						<!-- <l-painter-view css="" v-for="(ite,ind) in tabbar" :key="ind">
							<l-painter-image :src="'/static/index/svg/logo.svg'" v-if="value.type==ite.en"
								css="position: fixed;top:30px;left:30px;object-fit: fill; width: 100rpx; border-radius: 10rpx;" />
						</l-painter-view> -->
						<l-painter-view css="margin-top: 10rpx;  line-height: 1em;">
							<l-painter-text :text="value.name" css="vertical-align: bottom; font-size: 16px;" />
						</l-painter-view>
						<l-painter-view css="width: 100%;margin-top:5px;display: flex;justify-content: flex-end;">
							<l-painter-view css="width: 430rpx;">
								<l-painter-text
									css="width: 100%;margin-top: 20rpx;line-clamp: 3; color: #C6000B; line-height: 1.6em; font-size: 15px; box-sizing: border-box"
									:text="'观止AIGC'"></l-painter-text>
								<l-painter-text
									css="width: 100%;margin-top: 15rpx;line-clamp: 3; color: #333333; line-height: 1.6em; font-size: 13px; box-sizing: border-box"
									:text="'扫码登录，一键同款\nwww.readend.com'"></l-painter-text>
							</l-painter-view>
							<l-painter-qrcode css="width: 180rpx; height: 180rpx;padding-bottom: 5rpx;"
								:text="shareLinks"></l-painter-qrcode>
						</l-painter-view>
					</l-painter-view>
				</l-painter>
			</view>
			<el-button @click="clickPainter" type="primary">下 载</el-button>
			<el-button @click="outerVisible = false">取 消</el-button>
		</el-dialog>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar.vue';
	import {
		index,
		task,
		api,
		apiId,
		getScroll,
		scroll,
		delScroll,
	} from '@/common/api.js';
	import {
		uv_image,
		download
	} from '@/common/fun.js';
	import config from '@/common/config'
	export default {
		components: {
			// 注册组件
			tabbars
		},
		model: {
			prop: 'value', // 对应 props 的属性名
			event: 'input' // 触发事件名
		},
		props: {
			value: [String, Object],
			title: {
				type: String,
				default: '分享'
			},
			titleStyle: {
				type: String,
				default: 'width: 100%;margin: 5px 3px;'
			},
			url: {
				type: String,
				default: '/pages/index/details'
			},
			prefixIcon: {
				type: String,
				default: ''
			},
			suffixIcon: {
				type: String,
				default: ''
			},
			iconStyle: {
				type: String,
				default: ''
			},
			iconSize: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				tabbar: config.tabbar,
				visible: false,
				outerVisible: false,
				uvQrcode: false,
				userInput: false,
				optionQr: {
					// data: 'https://www.uvui.cn',
					useDynamicSize: true,
					errorCorrectLevel: 'Q',
					margin: 10,
					areaColor: "#ffffff",
					backgroundColor: "#eeeeee",
					areaColor: '#eeeeee',
					foregroundImageBackgroundColor: "#eeeeee",
					// 指定二维码前景，一般可在中间放logo
					foregroundImageSrc: '/static/logo.svg',
				},
				options: [],
				inputs: [],
				list: [],
				loading: false,
				states: ["Alabama", "Alaska", "Arizona",
					"Arkansas", "California", "Colorado",
					"Connecticut", "Delaware", "Florida",
					"Georgia", "Hawaii", "Idaho", "Illinois",
					"Indiana", "Iowa", "Kansas", "Kentucky",
					"Louisiana", "Maine", "Maryland",
					"Massachusetts", "Michigan", "Minnesota",
					"Mississippi", "Missouri", "Montana",
					"Nebraska", "Nevada", "New Hampshire",
					"New Jersey", "New Mexico", "New York",
					"North Carolina", "North Dakota", "Ohio",
					"Oklahoma", "Oregon", "Pennsylvania",
					"Rhode Island", "South Carolina",
					"South Dakota", "Tennessee", "Texas",
					"Utah", "Vermont", "Virginia",
					"Washington", "West Virginia", "Wisconsin",
					"Wyoming"
				]
			}
		},
		computed: {
			shareLinks() {
				return this.getInfo.hostname + '/#' + this.url + '?id=' + this.value._id + '&inviteCode=' + this
					.shareCode;
			},
			shareCode() {
				return this.vuex_user?.inviteCode || this.value.userinfo.inviteCode;
			}
		},
		mounted() {
			this.list = this.states.map(item => {
				return {
					value: `value:${item}`,
					label: `label:${item}`
				};
			});
		},
		methods: {
			uv_image,
			remoteMethod(query) {
				if (query !== '') {
					this.loading = true;
					setTimeout(() => {
						this.loading = false;
						this.options = this.list.filter(item => {
							return item.label.toLowerCase()
								.indexOf(query.toLowerCase()) > -1;
						});
					}, 200);
				} else {
					this.options = [];
				}
			},
			clickPainter() {
				const filetype = 'png';
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: filetype,
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						download(res.tempFilePath, '观止AIGC海报.' + filetype);
					},
				});
			},
			copy(text) {
				console.log(text);
				var that = this;
				if (typeof text !== 'string') {
					text = text[0].text
				}
				text = text.replace(/```/g, '');
				text = text.replace(/###/g, '');
				uni.setClipboardData({
					data: text,
					success: function() {
						that.$refs.toast.show({
							message: "复制成功"
						})
					},
					complete: function() {
						uni.hideToast();
					}
				});
			},
			updateValue(newVal) {
				this.$emit('input', newVal); // 触发事件更新父组件变量
			},
			routed(url) {
				uni.$uv.route({
					url: url,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.sharePoster {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.el-dialog__body {
			padding-top: 10px !important;
		}

		::v-deep .el-dialog__headerbtn i {
			font-size: 22px;
			margin-right: -3px;
			margin-top: -6px;
			padding: 5px;
			border: 2px solid #eee;
			border-radius: 50%;
		}

		::v-deep .el-dialog__body {
			padding-top: 10px;
		}
	}
</style>